🧑🏻‍💻搭建记录

前言

这是博客的第一篇文章，用来记录个人博客的搭建过程~

个人情况说明

自己的专业不是代码这一块的，所以搭建网站也挺有难度的，折腾了几天折腾到头疼，这篇文章就记录了我作为一个前端小白，使用Hexo框架，借由volantis主题进行个人博客搭建的一个过程吧，这篇文章可以为与我有相同情况的人作为参考~

Hexo & Volantis 选择说明

Hexo感觉是个人博客搭建方面比较有名的一个方式了，这方面的经验文章也比较多，所以就选择了这个框架来进行个人博客的搭建

Volantis主题则是在Github上搜索“Hexo theam”时，发现的star数较多的一个项目。选择的原因是主题的样式很对眼缘，精致美观而不花里胡哨，很适合用来放一些个人思考方面的文章，这样在使用网站阅读文章的时候，也能够在聚焦于文章本身内容的同时获得美妙的阅读体验。

向Hexo框架和Volantis主题的开发者们致敬！伟大！

博客使用说明

个人博客和Markdown笔记搭配使用是非常好的，首先用编辑Markdown文件形成笔记，然后再直接发布到个人博客上

所以如果你平常的笔记就是使用Markdown语法来进行记录的话，个人博客就可以成为个人笔记的一个很好拓展

当然如果你平常的笔记不是使用Markdown语法来进行记录的话，搭建个人博客后的工作流可能会麻烦一些，或者你也可以尝试使用Markdown来生成笔记，Markdown语法以及编辑器的选择有很多资料可以查找学习~

这与后面博客发布工作流部分是相对应的

参考文章

下面列举了搭建博客主要参考的文章

官方文档

Hexo官方文档

Volantis官方文档

Volantis主题源码

经验贴

从零开始免费搭建自己的博客(一)——本地搭建hexo框架

主要是上面这篇文章，作者对于搭建过程的说明可以说是很细致了，跟着步骤做完，博客网站的雏形也就搭建完成了

GitHub+Hexo 搭建个人网站详细教程

进阶配置

Volantis魔改教程

其中里边关于暗黑模式动画和首页动态诗词的内容，我在下面也会从小白的视角进行一些说明

Hexo博客主题个性化

https://volantis.js.org/categories/%E8%BF%9B%E9%98%B6%E7%8E%A9%E6%B3%95/

https://inkss.cn/post/610620a9/

其他资料

自己心中理想的个人博客样式

网址：https://volantis-x.js.org/

源码：https://github.com/volantis-x/volantis-x.github.io/blob/main/_config.volantis.yml

搭建过程

主要是跟着上面列出的参考文章进行个人博客的搭建

重点：如果是像我这样的小白，一定要把两个官方文档仔仔细细一字不落的阅读一遍，这样有助于理解网站的搭建方式与后续对站点样式进行配置

站点配置

两个官方文档的配置部分

Hexo官方文档

Volantis官方文档

样式配置

主要是Volantis主题的官方文档，跟着文档一步一步走

网站的本地部署与Github远程部署

这个与上面样式配置部分其实是同时进行的，因为在进行样式配置的时候，会同时进行网站本地部署和Github部署来进行配置效果查看，但有的时候发现自己进行的配置在本地或是Githubpage上没有生效，这时不知道是配置的问题还是网站部署的问题，这个部分针对的就是这个问题

本地部署

本地部署一般不会出错

如果觉得有配置在本地没有生效，可以使用clean清楚缓存文件后再重新生成与部署，代码为：

1	$hexo clean

Github page 部署

Github page的部署一般会较慢，这是因为在使用bash部署到远程后，Github page需要一定时间来进行部署，这可以在Github仓库中的Actions中看到每次的部署过程与所用时间

然而，在等待Github page部署完毕后打开远程page，发现自己的配置也并没有生效，通过在网上查找文章，发现可以通过在网页Ctrl+F5来强制刷新清楚网站的缓存，然后再加载网页，这样配置就能够生效了

个人样式配置细节

暗黑模式切换动画

教学文章：Volantis魔改教程

要把开头为小白准备的基础知识说明看一遍，特别是对于我这样的小白

步骤：

在sourse\_volantis\中新建文件headBegin.ejs，加入下面的代码

如果报错 $ is not defined,或其他有关 $ 的错误,很可能是因为你没有jQuery或者jQuery异常,需要自行引用.注意jQuery必须在目标代码之前,最好是第一个引用
1
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>

在\sourse\你的指定目录\中新建js和css文件，加入相应代码
js

function BackTOP() {
    $("#btn").hide();
    $(function () {
        $(window).scroll(function () {
            if ($(window).scrollTop() > 50) {
                $("#btn").fadeIn(200);
            } else {
                $("#btn").fadeOut(200);
            }
        });
        $("#btn").click(function () {
            $('body,html').animate({
                    scrollTop: 0
                },
                500);
            return false;
        });
    });
    $(function () {
        $("#say").click(function () {
            $('body,html').animate({
                    scrollTop: $('html, body').get(0).scrollHeight
                },
                500);
            return false;
        });
    })
}

$('#readmode').click(function () {
        $('body').toggleClass('read-mode')
    })
    
function SiderMenu() {
    $('#main-container').toggleClass('open');
    $('.iconflat').css('width', '50px').css('height', '50px');
    $('.openNav').css('height', '50px');
    $('#main-container,#mo-nav,.openNav').toggleClass('open')
}

function switchNightMode() {
    $('<div class="Cuteen_DarkSky"><div class="Cuteen_DarkPlanet"></div></div>').appendTo($("body")), setTimeout(
        function () {
            (volantis.dark.mode == "dark") 
            ? 
            ($("html").addClass("DarkMode"),
            $('#modeicon').attr("xlink:href", "#icon-sun")) 
            : 
            ($("html").removeClass("DarkMode"),
            $('#modeicon').attr("xlink:href", "#icon-_moon")), 
            setTimeout(function () {
                $(".Cuteen_DarkSky").fadeOut(1e3, function () {
                    $(this).remove()
                })
            }, 2e3)
        }), 50
}

function checkNightMode() {
    if ($("html").hasClass("n-f")) {
        $("html").removeClass("day");
        $("html").addClass("DarkMode");
        $('#modeicon').attr("xlink:href", "#icon-sun")
        return;
    }
    if ($("html").hasClass("d-f")) {
        $("html").removeClass("DarkMode");
        $("html").addClass("day");
        $('#modeicon').attr("xlink:href", "#icon-_moon")
        return;
    }
    if (volantis.dark.mode == "dark") {
        $("html").addClass("DarkMode");
        $('#modeicon').attr("xlink:href", "#icon-sun")
    } else {
        $("html").removeClass("DarkMode");
        $('#modeicon').attr("xlink:href", "#icon-_moon")
    }
}
BackTOP();
volantis.dark.push(switchNightMode);

css

#RightDownBtn {
    position: fixed;
    left: 1.875rem;
    bottom: 1.875rem;
    padding: 0.3125rem 0.625rem;
    background: #fff;
    border-radius: 0.1875rem;
    transition: 0.3s ease all;
    z-index: 1;
    align-items: flex-end;
    flex-direction: column;
    display: -moz-flex;
    display: flex;
    float: right;
}

#RightDownBtn>a,
#RightDownBtn>label {
    width: 1.5em;
    height: 1.5em;
    margin: 0.3125rem 0;
    transition: .2s cubic-bezier(.25, .46, .45, .94);
}

/* font color */
.DarkMode #page,
.DarkMode #colophon,
.DarkMode #vcomments .vbtn,
.DarkMode .art-content #archives .al_mon_list .al_mon,
.DarkMode .art-content #archives .al_mon_list span,
.DarkMode body,
.DarkMode .art-content #archives .al_mon_list .al_mon,
.DarkMode .art-content #archives .al_mon_list span,
.DarkMode button,
.DarkMode .art .art-content #archives a,
.DarkMode textarea,
.DarkMode strong,
.DarkMode a,
.DarkMode p,
.DarkMode li,
.DarkMode .label {
    color: rgba(255, 255, 255, .6);
}


.DarkMode #page,
.DarkMode body,
.DarkMode #colophon,
.DarkMode #main-container,
.DarkMode #page .yya,
.DarkMode #content,
.DarkMode #contentss,
.DarkMode #footer {
    background-color: #292a2d;
}
.DarkMode strong,
.DarkMode img {
    filter: brightness(.7);
}

/* sun and noon */
.Cuteen_DarkSky,
.Cuteen_DarkSky:before {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 88888888
}

.Cuteen_DarkSky {
    background: linear-gradient(#feb8b0, #fef9db)
}

.Cuteen_DarkSky:before {
    transition: 2s ease all;
    opacity: 0;
    background: linear-gradient(#4c3f6d, #6c62bb, #93b1ed)
}

.DarkMode .Cuteen_DarkSky:before {
    opacity: 1
}

.Cuteen_DarkPlanet {
    z-index: 99999999;
    position: fixed;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    -webkit-animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
    animation: CuteenPlanetMove 2s cubic-bezier(.7, 0, 0, 1);
    transform-origin: center bottom
}

@-webkit-keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes CuteenPlanetMove {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.Cuteen_DarkPlanet:after {
    position: absolute;
    left: 35%;
    top: 40%;
    width: 9.375rem;
    height: 9.375rem;
    border-radius: 50%;
    content: "";
    background: linear-gradient(#fefefe, #fffbe8)
}

文件headBegin.ejs中引用js 和css文件

1 2	<script defer src="/custom/Dark_Mode_Animation.js"></script> <link rel="stylesheet" href="/custom/Dark_Mode_Animation.css" type="text/css"/>

首页动态诗词

教学文章：Volantis魔改教程

以下皆为引用：“

在volantis的配置文件里修改 subtitle 为”<div id="binft"></div>“

############################### Cover ############################### > start
cover:
  ...
  subtitle: <div id="binft"></div>
  ...

以defer方式引入以下js,注意把里面的诗词改成自己的

var binft = function (r) {
    var isTransparent = true;
    function getRandomColor() {
        if(isTransparent){
            isTransparent = false;
            //此处修改字体颜色,最后的 0 和 1 不要改
            return "rgba(255,255,255,0)"
        }else{
            isTransparent = true;
            return "rgba(255,255,255,1)"
        }
    }  
    function n(r) {
        for (var n = document.createDocumentFragment(), i = 0; r > i; i++) {
            var oneword = document.createElement("span");
            oneword.textContent = "_"; // 此处是末尾字符,如果想用光标样式可以改为"|"
            oneword.style.color = getRandomColor();
            n.appendChild(oneword);
        }
        return n
    }
    function i() {
        var t = wordList[c.skillI];
        c.step ? c.step-- : (c.step = refreshDelayTime, c.prefixP < l.length ? (c.prefixP >= 0 && (c.text += l[c.prefixP]), c.prefixP++) : "forward" === c.direction ? c.skillP < t.length ? (c.text += t[c.skillP], c.skillP++) : c.delay ? c.delay-- : (c.direction = "backward", c.delay = showTotalWordDelayTime) : c.skillP > 0 ? (c.text = c.text.slice(0, -1), c.skillP--) : (c.skillI = (c.skillI + 1) % wordList.length, c.direction = "forward")), r.textContent = c.text, r.appendChild(n(c.prefixP < l.length ? Math.min(maxLength, maxLength + c.prefixP) : Math.min(maxLength, t.length - c.skillP))), setTimeout(i, d)
    }
    var l = "",
    //此处改成你自己的诗词
    wordList = [ 
            "有花堪折直需折,莫待无花空折枝.",
            "闲居少邻并,草径入荒园.鸟宿池边树,僧敲月下门.",
            "侯门一入深如海,从此萧郎是路人.",
            "才见岭头云似盖,已惊岩下雪如尘.",
            "人间万事消磨尽,只有清香似旧时.",
            "日暮酒醒人已远,满天风雨下西楼.",
            "落灯花,棋未收,叹新丰逆旅淹留.",
            "软风吹过窗纱,心期便隔天涯.",
            "迷惑失故路,薄暮无宿栖.",
            "不见白头相携老,只许与君共天明.",
            "晓迎秋露一枝新,不占园中最上春.",
            "荷尽已无擎雨盖,菊残犹有傲霜枝.",
            "春未绿,鬓先丝.人间别久不成悲.",
            "江东子弟多才俊,卷土重来未可知.",
            "莫听穿林打叶声,何妨吟啸且徐行.",
            "在天愿作比翼鸟,在地愿为连理枝.",
        ].map(function (r) {
    return r + ""
    }),
    showTotalWordDelayTime = 2,
    refreshDelayTime = 1,
    maxLength = 1,
    d = 75,
    c = {
        text: "",
        prefixP: -maxLength,
        skillI: 0,
        skillP: 0,
        direction: "forward",
        delay: showTotalWordDelayTime,
        step: refreshDelayTime
    };
    i()
};
binft(document.getElementById('binft'));

搜索框内文字自定义

找到volantis主题文件夹中的search.ejs，路径为：

\hexo-theme-volantis\layout\_partial\_cover\search.ejs

对应的代码片段：

<div class='bottom'>
   <% if (theme.search.enable === true) { %>
     <div class="m_search">
       <form name="searchform" class="form u-search-form">
         <input type="text" class="input u-search-input" placeholder="<%- theme.cover && theme.cover.search %>" />
         <i class="icon fa-solid fa-search fa-fw"></i>
       </form>
     </div>

要更改的内容为placeholder后面的内容，改为自己想要的内容就行：<%- theme.cover && theme.cover.search %>

不蒜子访问统计

如果希望使用不蒜子进行数据统计，可以参考官方文档-进阶设定-分析与统计部分的内容，需要更改三部分的内容

在blog/_config.volantis.yml中设置插件

plugins:
	...
  busuanzi: 
    enable: true
    ...

在blog/_config.volantis.yml中加入analytics

1 2	analytics: busuanzi: https://gcore.jsdelivr.net/gh/volantis-x/cdn-busuanzi@2.3/js/busuanzi.pure.mini.js

在blog/_config.volantis.yml中设置sidebar部分

sidebar:
  position: right # left right
  # 主页、分类、归档等独立页面
  for_page: [..., webinfo, ...]
  widget_library:
    # ---------------------------------------
    ...
    # webinfo widget
    webinfo:
      ...
      type:
       ...
        visitcounter:
          siteuv: 
            enable: true
            text: '本站访客数：'
            unit: '人'
          sitepv: 
            enable: true
            text: '本站总访问量：'
            unit: '次'
        ...

这样就能在侧边栏看到相应的统计信息了

图标Font Aewsome

看到了一篇文章讲到了这个问题，我自己还没有太搞清楚

Volantis主题设置学习日记

这些图标都是由一个名为Font Awesome的图标网站设计的，而在每个index.html文件的头部，都会通过一个js函数导入这些图标。在Font Awesome官方网站中，可以查到最新的Font Awesome图标的代码。而Font Awesome中文网也可以查到图标的种类（下面会说）。

自己的blog工作流

个人Blog网站的定位：放置一些比较重要且脱敏的笔记

步骤总结

本地完成笔记编辑
$hexo new "title"生成 md 文件
将 md 文件以及 assets 文件夹移动到目录下，上传图片更新图片引用链接
复制原文内容至新 md 文件中，删除原 md 文件与 assets 文件夹
静态网页文件生成 & 远程部署

首先使用Typora在本地进行笔记的记录，因为我习惯将笔记保存在本地（包括图片，图片放置于/.${filename}.assets的同目录文件夹中，后续会上传至图床）

对于需要发布在个人博客的文章，则可以先使用命令$hexo new "title"按照模板生成 md 文件，然后将 md 文件以及对应的 assets 文件夹移动到\source\_posts\目录下，使用 Typora 将所有图片上传至图床（同时 md 文件内的图片引用路径变为引用图床中的图片），接着将原 md 文件中的内容全选复制到新建的 md 文件中，填写文章对应 categories 与 tags 信息，接着生成静态网页文件&远程部署，这样就完成了文章的发布

git bash常用命令

$hexo clean # 清除本地的文件
$hexo g # 生成静态网页文件（简化命令）
$hexo s # 本地部署网站（简化命令）
$hexo d # 将网站远程部署（简化命令）

# 流程合并
$hexo clean && hexo g && hexo s

# 创建新的md文件
$hexo new "title"

源码备份

可以直接使用git将本地的所有文件备份至Github

利用目录层级管理post文件

项目名称：hexo-directory-category

项目地址：https://github.com/zthxxx/hexo-directory-category#readme

注意事项

force: true

1 2	auto_dir_categorize: force: true # options:true, false; default is false

如果想要使上面这样的设置生效，需要注意：

在Bash中使用命令hexo new "title"生成新的md文件时，md文件的yaml信息中必须有categories信息，或是像下面这样：

1	categories:

而不能是这样：

1 2	categories: - null

这样设置就能够正常生效，当然默认是force: false

可以继续鼓捣的方面

$$\LaTeX$$支持

绑定个人域名

结语

这篇文章总结了自己作为小白搭建博客的一些步骤，以及自己的博客文章发布工作流~

遇到问题总结

ssh相关

问题描述

在hexo d步骤出现

ssh: connect to host github.com port 22: Connection timed out  
fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists.   
FATAL  Something's wrong. Maybe you can find the solution here: https://hexo.io/docs/troubleshooting.html 
Error: Spawn failed

解决方式参考关于本地git通过ssh链接github时 time out问题的解决方法以及搭建hexo博客时，deploy出现ssh连接超时的问题，具体步骤如下：

需要通过修改你所生成的rsa所在地址~/.ssh下面的config文件所实现

在C:\Users\YourUserName\ .ssh目录下找到config文件，没有就新建一个
(其中，YourUserName是你的用户名，因人而异)

在windows中，这个config文件没有后缀，即没有指定类型，而在文件管理器中创建文件需要指定类型。可以复制同一目录下，类型仅为“文件”二字的其他文件，然后右键重命名为config

右键config文件，选择打开方式，选择vscode或者sublime text或者其他软件，尽量不要使用记事本，然后将里面的内容修改为如下：

Host github.com
HostName ssh.github.com
User git
Port 443
PreferredAuthentications publickey
IdentityFile ~\.ssh\id_rsa

注意“IdentityFile ~.ssh\id_rsa”需要将IdentityFile后面的文件路径修改为自己电脑下id_rsa的路径

To be continued …

Hexo博客添加文章目录

Hexo博客添加文章目录 | JanGin’s BLOG

Henry 小木屋-搭建记录